<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<title>收藏页面</title>
		<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
		<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
		<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
		<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
		<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
		<script>

			$(function (){

				pageList(1,2);

			})
            function pageList(pageNo, pageSize) {

                //查询前,将隐藏域中保存的信息取出来,重新赋予到搜索框中
                $("#likeId").val($.trim($("#hidden-likeId").val()));

                $.ajax({
                    url: "reader/pageList.do",
                    data: {
                        "pageNo": pageNo,
                        "pageSize": pageSize,
                        "readrId":"${SESSION_USER.id}",
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var html = "";
                        $.each(data.dataList, function (i, n) {
                            html += '<tr>';
                            html += '<td><input type="checkbox" id="qx"/></td>';
                            html += '<td style="width: 40%">'+n.novelId+'</td>';
                            html += '</tr>';
                        })

                        $("#likeBody").html(html);

                        //计算总页数
                        var totalPages = data.total % pageSize === 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

                        //数据处理完毕后,结合分页插件对前端展现分页相关的信息
                        $("#likePage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数是在,点击分页组件的时候触发的
                            //pageList方法调用的是自己写的方法,但是里面的参数,是分页插件提供的,不能碰
                            onChangePage: function (event, data) {
                                pageList(data.currentPage, data.rowsPerPage);
                            }
                        });

                    }
                })
            }

		</script>
	</head>
	<body>
		<div style="position: relative;top: 10px;">
			<input type="hidden" id="hidden-likeId">
			<table class="table table-hover" style="margin-left: 10px;">
				<thead>
				<tr>
					<th><input type="checkbox" id="qx"/></th>
					<th style="width: 40%">小说名</th>
				</tr>
				</thead>
				<tbody id="likeBody">
				<%--<tr>
					<td id="s">章节名</td>
					<td>内容</td>
					<td>创建/更新时间</td>
				</tr>--%>
				</tbody>
			</table>
		</div>
		<div style="height: 50px; position: relative;top: 30px;">
			<div id="likePage"></div>
		</div>
	</body>
</html>
